<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<template #top>
			<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="white" @clickLeft="goBack">
				<template #left>
					<image class="size-32" src="@/static/svg/icon-back.svg" />
				</template>
				<view class="tabs bg-white flex item-center px-16">
					<view v-for="(tab,i) in tabs" :key="i" class="tab-item inline-flex h-30" :class="currentStatusTab===tab.code ? 'active text-color-regular fs-16 text-bold':'text-color-hint fs-15'" @click="onStatusTabClick(tab, i)">
						<text>{{tab.name}}</text>
					</view>
				</view>
			</uni-nav-bar>
		</template>
		<template #empty>
			<view>
				<image style="width:136px;height:136px;" src="@/static/svg/order/empty-order.svg"></image>
				<view class="mt-4 text-center fs-12 text-color-regular font-normal leading-17">暂无数据</view>
			</view>
		</template>
		<view class="bg-default px-16 py-12 flex-col">
			<view v-if="currentStatusTab===2" class="flex justify-end mb-12" @click="toClean">
				<image class="size-16 mr-4" src="@/pagesA/static/svg/icon-clean.svg"></image>
				<text class="text-color-hint fs-12 font-normal">清空</text>
			</view>
			<activity-list-item
				v-for="(item, i) in dataList"
				:key="i"
				:data="item"
				:showCollectButton="currentStatusTab===1"
				class="mb-12"
				@toShare="toShare"
				@toRefresh="dataList.splice(i, 1)"
			/>
		</view>
		<share-activity v-if="shareItem" :id="shareItem.id" :show="showSharePopup" @onClose="showSharePopup=false" :options="{groupBuyLabel:shareItem.promotionLabel}"  />
	</z-paging>
</template>

<script setup name="FavoritesAndBrowsing">
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
	import { onMounted, ref, unref, computed } from 'vue'
	import { getActiveCollectListApi, getActiveBrowseListApi, activeBrowseClearApi } from '@/pagesA/api/favorites-browsing.js'
	import ActivityListItem from './components/ActivityListItem.vue'
	
	const goBack = () => uni.navigateBack()
	
	const tabs = ref([
		{ name: '我的收藏', code: 1 },
		{ name: '历史浏览', code: 2 }
	])
	const currentStatusTab = ref(1)
	const onStatusTabClick = (tab, i) => {
		if (tab.code !== currentStatusTab.value) {
			currentStatusTab.value = tab.code
			paging.value.reload()
		}
	}
	
	const toClean = () => {
		uni.showModal({
			content: '确认清空全部浏览记录？',
			confirmColor: '#FA4543',
			success: (res) => {
				if (res.confirm) {
					cleanAll()
				}
			}
		})
	}
	
	const cleanAll = () => {
		activeBrowseClearApi().then(res => {
			uni.showToast({
				title: '清除成功',
				icon: 'none'
			})
			refresh()
		})
	}
	
	const paging = ref(null)
	const dataList = ref([])
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10
	})
	const queryList = (pageNo, pageSize) => {
		const apiMethod = currentStatusTab.value === 1 ? getActiveCollectListApi : getActiveBrowseListApi
		queryParams.value.pageNum = pageNo
		apiMethod(unref(queryParams)).then(res => {
			paging.value.complete(res.list)
		})
	}
	
	const refresh = () => {
		paging.value.reload()
	}
	
	onLoad((query) => {
		uni.hideShareMenu()
		currentStatusTab.value = +query.tab || 1
	})
	
	const showSharePopup = ref(false)
	const shareItem = ref({})
	const toShare = (item) => {
		shareItem.value = item
		showSharePopup.value = true
	}
	onShareAppMessage((options) => {
		console.log('活动分享', options)
		console.log("options:",options);
		const activityId = options.target.dataset.activityId;
		const target = dataList.value.find(item=>item.id===activityId);
		const url = target?.promotionType === 'GROUP_BUY'
			? `/pagesB/activity/activity-group-buy`
			: `/pagesB/activity/activity`;
		return {
			title: options.target.dataset.title,
			path: `${url}?id=${activityId}&code=${options.target.dataset.shareCode}&_from=favority`,
			imageUrl: options.target.dataset.filepath
		}
	})
</script>


<style lang="scss" scoped>
	.tabs {
		overflow: auto;
		white-space: nowrap;
		
		.tab-item {

			&:not(:last-child) {
				margin-right: 36px;
			}
		}
		.active {
			position: relative;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 15%;
				height: 4px;
				width: 70%;
				border-radius: 4px;
				background: $uni-primary;
			}
		}
	}
</style>
